<template>
  <Card class="crane-control">
    <div class="header">
      <Icon type="md-contract" />
      <h3>{{ title }}控制面板</h3>
    </div>

    <!-- <div
      class="panel-logo"
      :class="{ 'paused ': status.isPaused === '暂停标志' }"
    >
      {{ status.isPaused ? '暂停标志' : '行车标志' }}
    </div> -->

    <div class="control-buttons">
      <Button
        v-for="btn in mainControls"
        :key="btn.type"
        :type="btn.btnType"
        :loading="btn.loading"
        @click="handleControl(btn.type)"
      >
        {{ btn.label }}
      </Button>

      <Button
        v-for="hook in hookStates"
        :key="hook.type"
        :type="hook.active ? 'success' : 'dashed'"
        @click="toggleHook(hook.type)"
      >
        <Icon :type="hook.icon" />
        {{ hook.label }} {{ hook.active ? '有效' : '无效' }}
      </Button>
    </div>
  </Card>
</template>

<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue, N_drivingSet } from './config';

@T_srv.comp
export default class CraneControl extends vue {
  @T_srv.prop({ required: true }) title!: string;

  @T_srv.prop({ required: true }) status!: any;

  @T_srv.prop({ required: true }) craneControls!: N_drivingSet.ControlState[];

  @T_srv.prop({ required: true }) craneStates!: N_drivingSet.HookState[];

  private mainControls: N_drivingSet.ControlState[];

  private hookStates: N_drivingSet.HookState[];

  created() {
    this.mainControls = Tsrv.utils.clone(this.craneControls, true);
    this.hookStates = this.craneStates;
  }

  private handleControl(type: string) {
    const control = this.mainControls.find(c => c.type === type);
    if (control) {
      control.loading = true;
      setTimeout(() => {
        control.loading = false;
        // TODO: 调用PLC控制接口
        // this.$emit('control-action', type);
        const data = [{ ecDetCode: control.code, value: 'true' }];
        Tsrv.writePlcData(data).then(success => {
          if (success) {
            this.$Message.success(`${control.label}成功`);
          }
        });
      }, 300);
    }
  }

  private toggleHook(type: string) {
    this.$emit('hook-change', {
      title: this.title,
      type
    });
  }
}
</script>

<style lang="scss" scoped>
.crane-control {
  // margin-bottom: 16px;
  height: 100%;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      margin-left: 8px;
      font-size: 16px;
    }
  }

  .panel-logo {
    width: 100%;
    height: 36px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: 2px 4px 2px -2px var(--globalSearch-input-bg-color),
      -2px -4px 15px -2px var(--globalSearch-input-bg-color);
  }

  .control-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;

    .ivu-btn {
      margin: 4px;
      transition: all 0.3s;

      &-loading {
        opacity: 0.7;
      }
    }

    .hook-controls {
      // grid-column: 1 / -1;

      .ivu-btn {
        width: 50%;
        border-radius: 0;

        &:first-child {
          border-radius: 4px 0 0 4px;
        }
        &:last-child {
          border-radius: 0 4px 4px 0;
        }
      }
    }
  }

  // .ivu-divider {
  //   margin: 12px 0;
  // }

  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .paused {
    animation: blink 1s infinite;
    color: #ffad33;
  }
}
</style>
